<template>
  <div class="app">
    <div class="textarea" id="textareas" contenteditable="true" placeholder="请输入文字"></div>
    <div class="vue-upload-img-multiple">
      <ul>
        <li v-show="image" v-for="(image,index) in imagesLrz" :key="index">
          <div class="img_size">
            <div :style="'backgroundImage:url('+image+')'" class="picture"></div>
            <span @click='delImage(index)' class="remove">x</span>
          </div>
        </li>
        <li v-show="showLoading">
          <img class="loading" src="./image/1.gif" alt="">
        </li>
        <li class="input-container">
          <input type="file" @change="onFileChange" accept="image/gif,image/jpeg,image/jpg,image/png"
                 class="file-input" ref="input">
        </li>
      </ul>
      <button style="margin-top: 40px" @click='uploadImage'>上传</button>
    </div>
    <!--<div class="vue-upload-img-multiple">
      <ol class="ul_img">
        <li v-for="(image,key) in images" :key="key">
          <div class="img_size">
            <img :src="image" @click="delImage(key)" alt="">
            <span @click='delImage(key)' class="remove">x</span>
          </div>
        </li>
        <li v-show="showLoad">
          <img class="loadImg" src='./image/1.gif' alt="">
        </li>
        <li class="input-container">
          <input type="file" @change="onFileChange" multiple class="file-input">
        </li>
      </ol>
      <button style="margin-top: 40px" @click='uploadImage'>上传</button>
    </div>-->
  </div>
</template>
<style lang="scss">
  .app {
    width: 100%;
    padding-top: 100px;
    .textarea {
      width: 100%;
      height: 100px;
      border: 1px solid #d7d7d7;
      outline: none;
    }
    .textarea:empty::before {
      color: lightgrey;
      content: attr(placeholder);
    }
    .vue-upload-img-multiple {
      width: 100%;
      height: 100%;
      padding: 0 10px 10px;
      box-sizing: border-box;
      display: inline-block;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 25%;
          margin-top: 5px;
          text-align: center;
          .loading {
            display: block;
            margin: 0 auto;
            margin-top: 20px;
          }
          .img_size {
            display: inline-block;
            position: relative;
            .picture {
              width: 70px;
              height: 70px;
              float: left;
              border-radius: 4px;
              background-position: center center;
              background-repeat: no-repeat;
              background-size: cover;
            }
            .remove {
              position: absolute;
              top: -10px;
              right: -8px;
              width: 18px;
              height: 18px;
              z-index: 11;
              line-height: 18px;
              text-align: center;
              border-radius: 50%;
              // border-bottom: 1px solid #000;
              background-color: red;
              color: #fff;
              font-size: 15px;
            }
          }
        }
        .input-container {
          display: inline-block;
          background: url('../common/images/tianjiatupian@2x.png') no-repeat;
          width: 70px;
          height: 70px;
          background-size: 100% 100%;
          text-align: center;
        }
        .file-input {
          height: 70px;
          width: 70px;
          opacity: 0;
          font-size: 0;
        }
      }
    }
    /*  .vue-upload-img-multiple {
        width: 100%;
        height: 100%;
        padding-top: 40px;
        box-sizing: border-box;
        display: inline-block;
        .ul_img {
          display: flex;
          flex-wrap: wrap;
          li {
            width: 25%;
            margin-top: 5px;
            .loadImg {
              width: 30px;
              height: 30px;
              margin-top: 20px;
              margin-left: 24px;
            }
            .img_size {
              display: inline-block;
              width: 70px;
              height: 70px;
              position: relative;
              img {
                width: 100%;
                height: 100%;
                border-radius: 4px;
                display: block;
              }
              .remove {
                position: absolute;
                top: -10px;
                right: -8px;
                width: 18px;
                height: 18px;
                z-index: 11;
                line-height: 18px;
                text-align: center;
                border-radius: 50%;
                // border-bottom: 1px solid #000;
                background-color: red;
                color: #fff;
                font-size: 15px;
              }
            }
          }
          .input-container {
            display: inline-block;
            background: url('../home/image/fabu@3x.png') no-repeat;
            width: 70px;
            height: 70px;
            background-size: 100% 100%;
            text-align: center;
          }
          .file-input {
            height: 70px;
            width: 70px;
            opacity: 0;
            font-size: 0;
          }
        }
      }*/
    .img_show {
      width: 100%;
      background: palegreen;
      .addBox {
        /*display: inline-block;*/
        background: url('../home/image/fabu@3x.png') no-repeat;
        width: 70px;
        height: 70px;
        background-size: 100% 100%;
        text-align: center;
      }
    }
  }
</style>
<script>
  import qs from 'qs'
  import lrz from 'lrz'
  import {Toast, Indicator} from 'mint-ui'

  export default ({
    name: 'Message2',
    data() {
      return {
        images: [],
        showLoad: false,
        value: '',
        html: '',
        imagesLrz: [],
        showLoading: false,
        totalCount: 200,
        currentCount: 0
      }
    },
    methods: {
      // addPic(e) {
      //   e.preventDefault();
      //   $('input[type=file]').trigger('click');
      //   return false;
      // },
      // onFileChange(e) {
      //   var files = e.target.files || e.dataTransfer.files;
      //   if (!files.length) return;
      //   this.createImage(files);
      // },
      // createImage(file) {
      //   this.showLoad = true
      //   if (typeof FileReader === 'undefined') {
      //     alert('您的浏览器不支持图片上传，请升级您的浏览器');
      //     return false;
      //   }
      //   var image = new Image();
      //   var vm = this;
      //   var leng = file.length;
      //   for (var i = 0; i < leng; i++) {
      //     var reader = new FileReader();
      //     reader.readAsDataURL(file[i]);
      //     reader.onload = function (e) {
      //       vm.images.push(e.target.result);
      //       this.showLoad = false
      //     };
      //   }
      // },
      // delImage: function (index) {
      //   this.images.shift(index);
      // },
      // removeImage: function (e) {
      //   this.images = [];
      // },
      // created() {
      //   console.log(this.images)
      // },
      // uploadImage: function () {
      //   $.ajax({
      //     type: 'post',
      //     url: "https://ynwx.zgwyzxw.cn/index.php/home/renthouse/add",
      //     data: {
      //       title: '出租办公环境',
      //       content: '出租丁香花园的顶楼的办公场所，从窗户望去，可以看见碧蓝的大海',
      //       img: this.images,
      //       areas_id: 204,
      //       openid: 'oHVoI1YFA6zvN1ymtrO4WrrRrmzA'
      //     },
      //     dataType: "json",
      //     success: function (data) {
      //       if (data.code === 200) {
      //         alert(data.data);
      //         return false;
      //       } else {
      //         alert('上传失败');
      //         return false;
      //       }
      //     }
      //   });
      // }
      onFileChange(e) {
        if (this.imagesLrz.length > 3) {
          Toast({
            message: '最多上传4张图片',
            position: 'middle',
            duration: 2000
          })
          return
        }
        let files = e.target.files || e.dataTransfer.files
        if (!files.length) return
        this.createImage(files)
      },
      createImage(file, e) {
        this.showLoading = true
        lrz(file[0], {quality: 0.4})
          .then((rst) => {
            let img = new Image()
            img.src = rst.base64
            this.imagesLrz.push(rst.base64)
            // this.$emit('getImage', this.imagesLrz)
            // return rst
            this.showLoading = false
          })
          .always(function () {
            // 清空文件上传控件的值
            e.target.value = null
          })
      },
      delImage(index) {
        this.imagesLrz.splice(index, 1)
        this.$refs.input.value = ''
      },
      uploadImage() {
        this.value = document.getElementById('textareas').innerText
        // console.log(this.value)
        setTimeout(function () {
          Indicator.close()
        }, 10000)
        if (!this.value.trim().length || !this.value || !this.imagesLrz.length) {
          Toast({
            message: '请填写完整信息',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        const url = 'https://ynwx.zgwyzxw.cn/index.php/home/renthouse/add'
        const data = {
          title: 'yn',
          content: this.value,
          img: this.imagesLrz,
          areas_id: 204,
          openid: 'oHVoI1YFA6zvN1ymtrO4WrrRrmzA'
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          if (res.data.code === 200) {
            Indicator.close()
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 1500
            })
          }
          if (res.data.code === 400) {
            Indicator.close()
            Toast({
              message: '发布失败',
              position: 'middle',
              duration: 1500
            })
          }
          if (res.data.code === 401) {
            Indicator.close()
            Toast({
              message: '您的发表帖子已经触犯相关法律法规,暂时不能使用发帖和评论功能.',
              position: 'middle',
              duration: 1500
            })
          }
        })
      }
    },
    components: {
    }
  })
</script>
